Фронтенд мікрофронтенд-роутер: міждодаткова навігація

У сучасній веб-розробці архітектура мікрофронтендів набула значної популярності як спосіб створення великих, складних додатків. Вона передбачає розбиття монолітного фронтенду на менші, незалежні та розгортані одиниці (мікрофронтенди). Одним із ключових викликів у цій архітектурі є керування міждодатковою навігацією, що дозволяє користувачам безперешкодно переходити між цими незалежними мікрофронтендами. Ця стаття є вичерпним посібником з маршрутизації для мікрофронтендів та міждодаткової навігації.

Що таке мікрофронтенди?

Мікрофронтенди — це архітектурний стиль, за якого незалежно доставлювані фронтенд-додатки об'єднуються в єдиний, цілісний користувацький досвід. Це аналогічно мікросервісам у бекенді. Кожен мікрофронтенд зазвичай належить окремій команді, що забезпечує більшу автономію, швидші цикли розробки та легше обслуговування. Переваги мікрофронтендів включають:

• Незалежне розгортання: Команди можуть розгортати свої мікрофронтенди, не впливаючи на інші частини додатку.
• Технологічне розмаїття: Різні мікрофронтенди можна створювати з використанням різних технологій, що дозволяє командам обирати найкращий інструмент для конкретного завдання. Наприклад, одна команда може використовувати React, а інша — Vue.js або Angular.
• Масштабованість: Додаток може легше масштабуватися, оскільки кожен мікрофронтенд можна масштабувати незалежно.
• Покращене обслуговування: Менші кодові бази легше розуміти та підтримувати.
• Автономність команд: Команди мають більше контролю над власним кодом та процесом розробки.

Необхідність мікрофронтенд-роутера

Без чітко визначеної стратегії маршрутизації користувачі матимуть розрізнений і неприємний досвід при переході між мікрофронтендами. Мікрофронтенд-роутер вирішує цю проблему, надаючи централізований механізм для керування навігацією по всьому додатку. Це включає обробку:

• Керування URL: Забезпечення того, що URL точно відображає поточне місцезнаходження користувача в додатку.
• Керування станом: Спільне використання стану між мікрофронтендами за потреби.
• Ліниве завантаження: Завантаження мікрофронтендів лише тоді, коли вони потрібні, для покращення продуктивності.
• Автентифікація та авторизація: Обробка автентифікації та авторизації користувачів у різних мікрофронтендах.

Стратегії міждодаткової навігації

Існує кілька підходів до реалізації міждодаткової навігації в архітектурі мікрофронтендів. Кожен підхід має свої переваги та недоліки, і найкращий вибір залежить від конкретних вимог вашого додатку.

1. Використання централізованого роутера (Single-Spa)

Single-Spa — це популярний фреймворк для створення мікрофронтендів. Він використовує централізований роутер для керування навігацією між різними додатками. Основний додаток діє як оркестратор і відповідає за рендеринг та демонтування мікрофронтендів на основі поточного URL.

Як це працює:

1. Користувач переходить за певним URL.
2. Роутер single-spa перехоплює зміну URL.
3. На основі URL роутер визначає, який мікрофронтенд має бути активним.
4. Роутер активує відповідний мікрофронтенд і демонтує будь-які інші активні мікрофронтенди.

Приклад (Single-Spa):

Припустимо, у вас є три мікрофронтенди: home, products та cart. Роутер single-spa буде налаштований наступним чином:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

У цьому прикладі кожен мікрофронтенд реєструється в single-spa, і надається функція, яка визначає, коли мікрофронтенд має бути активним на основі URL. Коли користувач переходить на /products, активується мікрофронтенд products.

Переваги:

• Централізований контроль над маршрутизацією.
• Спрощене керування станом (може оброблятися оркестратором single-spa).
• Легка інтеграція з існуючими додатками.

Недоліки:

• Єдина точка відмови. Якщо оркестратор вийде з ладу, весь додаток буде порушено.
• Може стати вузьким місцем продуктивності, якщо не реалізовано ефективно.

2. Module Federation (Webpack 5)

Module Federation у Webpack 5 дозволяє обмінюватися кодом між різними збірками Webpack під час виконання. Це означає, що ви можете надавати доступ до компонентів, модулів або навіть цілих додатків з однієї збірки (хоста) для іншої (віддаленої). Це полегшує створення мікрофронтендів, де кожен мікрофронтенд є окремою збіркою Webpack.

Як це працює:

1. Кожен мікрофронтенд збирається як окремий проєкт Webpack.
2. Один мікрофронтенд визначається як хост-додаток.
3. Хост-додаток визначає, які модулі він хоче споживати з віддалених мікрофронтендів.
4. Віддалені мікрофронтенди визначають, які модулі вони хочуть надати хост-додатку.
5. Під час виконання хост-додаток завантажує надані модулі з віддалених мікрофронтендів за потреби.

Приклад (Module Federation):

Припустимо, є додаток host і додаток remote.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

У цьому прикладі додаток host споживає компонент Button з додатку remote. Опція shared гарантує, що обидва додатки використовують одну й ту ж версію react та react-dom.

Переваги:

• Децентралізована архітектура. Кожен мікрофронтенд є незалежним і може розроблятися та розгортатися окремо.
• Спільне використання коду. Module Federation дозволяє обмінюватися кодом між різними додатками під час виконання.
• Ліниве завантаження. Модулі завантажуються лише тоді, коли вони потрібні, що покращує продуктивність.

Недоліки:

• Складніше налаштувати та конфігурувати, ніж single-spa.
• Вимагає ретельного управління спільними залежностями, щоб уникнути конфліктів версій.

3. Веб-компоненти

Веб-компоненти — це набір веб-стандартів, які дозволяють створювати багаторазові власні HTML-елементи. Ці компоненти можна використовувати в будь-якому веб-додатку, незалежно від використовуваного фреймворку. Це робить їх природним вибором для архітектур мікрофронтендів, оскільки вони забезпечують технологічно-агностичний спосіб створення та спільного використання UI-компонентів.

Як це працює:

1. Кожен мікрофронтенд надає свій UI у вигляді набору веб-компонентів.
2. Основний додаток (або інший мікрофронтенд) споживає ці веб-компоненти, імпортуючи їх і використовуючи у своєму HTML.
3. Веб-компоненти самостійно обробляють свій рендеринг та логіку.

Приклад (Веб-компоненти):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Привіт з мікрофронтенду А!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (основний додаток):

Основний додаток

У цьому прикладі файл micro-frontend-a.js визначає веб-компонент під назвою micro-frontend-a. Файл index.html імпортує цей файл і використовує веб-компонент у своєму HTML. Браузер відрендерить веб-компонент, відображаючи "Привіт з мікрофронтенду А!".

Переваги:

• Технологічна агностичність. Веб-компоненти можна використовувати з будь-яким фреймворком або взагалі без нього.
• Багаторазове використання. Веб-компоненти можна легко повторно використовувати в різних додатках.
• Інкапсуляція. Веб-компоненти інкапсулюють власні стилі та логіку, запобігаючи конфліктам з іншими частинами додатку.

Недоліки:

• Може бути більш громіздким у реалізації, ніж інші підходи.
• Може вимагати поліфілів для підтримки старих браузерів.

4. Iframe-и

Iframe-и (Inline Frames) — це старіший, але все ще життєздатний варіант для ізоляції мікрофронтендів. Кожен мікрофронтенд працює у власному iframe, забезпечуючи високий ступінь ізоляції. Зв'язок між iframe-ами можна встановити за допомогою API postMessage.

Як це працює:

1. Кожен мікрофронтенд розгортається як окремий веб-додаток.
2. Основний додаток включає кожен мікрофронтенд в iframe.
3. Зв'язок між основним додатком та мікрофронтендами здійснюється за допомогою API postMessage.

Приклад (Iframe-и):

index.html (основний додаток):

Основний додаток

У цьому прикладі файл index.html містить два iframe-и, кожен з яких вказує на різний мікрофронтенд.

Переваги:

• Високий ступінь ізоляції. Мікрофронтенди повністю ізольовані один від одного, що запобігає конфліктам.
• Легко реалізувати. Iframe-и — це проста і добре відома технологія.

Недоліки:

• Може бути складно налагодити зв'язок між iframe-ами.
• Можуть виникати проблеми з продуктивністю через накладні витрати на кілька iframe-ів.
• Поганий користувацький досвід через відсутність безшовної інтеграції.

Керування станом між мікрофронтендами

Керування станом між мікрофронтендами є критичним аспектом міждодаткової навігації. Можна використовувати кілька стратегій:

• Стан на основі URL: Кодування стану в URL. Цей підхід робить стан додатку доступним для спільного використання через URL і легким для додавання в закладки.
• Централізоване керування станом (Redux, Vuex): Використання глобальної бібліотеки для керування станом для спільного використання стану між мікрофронтендами. Це особливо корисно для складних додатків зі значним спільним станом.
• Власні події (Custom Events): Використання власних подій для передачі змін стану між мікрофронтендами. Цей підхід дозволяє забезпечити слабкий зв'язок між мікрофронтендами.
• Сховище браузера (LocalStorage, SessionStorage): Зберігання стану у сховищі браузера. Цей підхід підходить для простого стану, який не потрібно передавати всім мікрофронтендам. Однак слід пам'ятати про аспекти безпеки при зберіганні конфіденційних даних.

Автентифікація та авторизація

Автентифікація та авторизація є ключовими аспектами будь-якого веб-додатку, і вони стають ще важливішими в архітектурі мікрофронтендів. Поширені підходи включають:

• Централізована служба автентифікації: Виділена служба обробляє автентифікацію користувачів і видає токени (наприклад, JWT). Мікрофронтенди можуть перевіряти ці токени для визначення авторизації користувача.
• Спільний модуль автентифікації: Спільний модуль відповідає за логіку автентифікації. Цей модуль може використовуватися всіма мікрофронтендами.
• Гранична автентифікація (Edge Authentication): Автентифікація обробляється на межі мережі (наприклад, за допомогою зворотного проксі або API-шлюзу). Цей підхід може спростити логіку автентифікації в мікрофронтендах.

Найкращі практики для маршрутизації мікрофронтендів

Ось кілька найкращих практик, які слід враховувати при реалізації маршрутизації мікрофронтендів:

• Зберігайте простоту: Оберіть найпростішу стратегію маршрутизації, яка відповідає вашим потребам.
• Розділяйте мікрофронтенди: Мінімізуйте залежності між мікрофронтендами, щоб сприяти незалежній розробці та розгортанню.
• Використовуйте послідовну структуру URL: Підтримуйте послідовну структуру URL у всіх мікрофронтендах для покращення користувацького досвіду та SEO.
• Впроваджуйте ліниве завантаження: Завантажуйте мікрофронтенди лише тоді, коли вони потрібні, для покращення продуктивності.
• Моніторте продуктивність: Регулярно відстежуйте продуктивність вашого мікрофронтенд-додатку, щоб виявляти та усувати будь-які вузькі місця.
• Встановіть чіткі канали комунікації: Переконайтеся, що команди, які працюють над різними мікрофронтендами, мають чіткі канали зв'язку для координації зусиль розробки та вирішення будь-яких проблем інтеграції.
• Впроваджуйте надійну обробку помилок: Реалізуйте надійну обробку помилок для коректної обробки збоїв в окремих мікрофронтендах і запобігання їх впливу на весь додаток.
• Автоматизоване тестування: Впроваджуйте комплексне автоматизоване тестування, включаючи юніт-тести, інтеграційні тести та наскрізні тести, щоб забезпечити якість та стабільність вашого мікрофронтенд-додатку.

Висновок

Маршрутизація мікрофронтендів — це складний, але важливий аспект створення масштабованих та підтримуваних веб-додатків. Ретельно розглядаючи різні стратегії маршрутизації та найкращі практики, викладені в цій статті, ви можете створити безшовний та зручний для користувача досвід. Вибір правильного підходу, будь то централізований роутер, як Single-Spa, Module Federation, веб-компоненти або навіть Iframe-и, залежить від ваших конкретних потреб і пріоритетів. Не забувайте надавати пріоритет розділенню, послідовним структурам URL та оптимізації продуктивності. Впровадивши добре продуману стратегію маршрутизації, ви зможете розкрити весь потенціал архітектури мікрофронтендів і створювати справді виняткові веб-додатки для глобальної аудиторії.